/**
 * @description: 构造日历类Calendar
 * @param {id} 日历组件根目录
 */

class Calendar {
    constructor(id) {
        this.currentTime = "" //当前时间的年月日
        this.year = dayjs().year()
        this.month = dayjs().month() + 1
        this.day = dayjs().date()
        this.root = document.querySelector(id) //根节点
        this.monthOptionEle = document.querySelectorAll('.month option') //月份下拉框
        this.yearOptionEle = document.querySelectorAll('.year option') //年下拉框
        this._yearEle = this.root.querySelector('.year select')
        this._monthEle = this.root.querySelector('.month select')
        this.btn_year = this.root.querySelector('.btn_year')
        this.btn_month = this.root.querySelector('.btn_month')
    }
    /* 设置当前时间下拉框状态 */
    getCurrentTime() {
        this.yearOptionEle.forEach(item => {
            if (item.value == this.year) {
                item.setAttribute("selected", "true")
            }
        })
        this.monthOptionEle.forEach(item => {
            if (item.value == this.month) {
                item.setAttribute("selected", "true")
            }
        })
    }
    /* 判断闰年 */
    runNian(_year) {
        if (_year % 400 === 0 || (_year % 4 === 0 && _year % 100 !== 0)) {
            return true;
        } else {
            return false;
        }
    }
    /* 判断某年某月的第一天是星期几 */
    getFirstDay(_year, _month) {
        var tmpDate = new Date(_year, _month - 1, 1)
        return (tmpDate.getDay())
    }
    /* 判断每个月的天数 */
    getMonthDay(_year, _month) {
        let monthDay = 0
        switch (_month) {
            case 1:
                monthDay = 31;
                break;
            case 2:
                if (this.runNian(_year)) {
                    monthDay = 29;
                } else {
                    monthDay = 28;
                }
                break;
            case 3:
                monthDay = 31;
                break;
            case 4:
                monthDay = 30;
                break;
            case 5:
                monthDay = 31;
                break;
            case 6:
                monthDay = 30;
                break;
            case 7:
                monthDay = 31;
                break;
            case 8:
                monthDay = 31;
                break;
            case 9:
                monthDay = 30;
                break;
            case 10:
                monthDay = 31;
                break;
            case 11:
                monthDay = 30;
                break;
            case 12:
                monthDay = 31;
                break;
        }
        return monthDay
    }
    /* 显示日历日期 */
    showCalendar(_year, _month, _day, firstDay) {
        //获取当前月份的天数
        let monthDay = this.getMonthDay(_year, _month)
        //获取上个月份的天数
        let lastMonthDay = 0
        if (_month === 1) {
            lastMonthDay = 31
        } else {
            lastMonthDay = this.getMonthDay(_year, _month - 1)
        }
        // 日历星期
        let html = `
                    <li>一</li>
                    <li>二</li>
                    <li>三</li>
                    <li>四</li>
                    <li>五</li>
                    <li>六</li>
                    <li>日</li>
        `
        //当月第一天前的日期
        for (var i = 1; i < firstDay; i++) {
            html += `<li class = "cld-old">${lastMonthDay-firstDay+1+i}</li>`
        }
        //显示当前月的天数
        for (var j = 1; j < monthDay + 1; j++) {
            //当天的日期
            if (_year == this.year && _month == this.month && j == _day) {
                html += `<li class = "cld-cur line">${j}</li>`
            } else if (_day == j) {
                html += `<li class = "cld-cur line">${j}</li>`
            }
            //其他日期
            else {
                html += `<li>${j}</li>`
            }
        }
        //当月最后一天后的日期
        let lastDayCount = 42 - (firstDay - 1) - monthDay
        for (var k = 1; k <= lastDayCount; k++) {
            html += `<li class = "cld-old">${k}</li>`
        }
        this.root.querySelector('ul').innerHTML = html
    }
    /* 获取select的值 */
    getSelectValue() {
        let _yearIndex = this._yearEle.selectedIndex
        let _year = Number(this._yearEle.options[_yearIndex].value)
        let _monthIndex = this._monthEle.selectedIndex
        let _month = Number(this._monthEle.options[_monthIndex].value)
        let firstDay = this.getFirstDay(_year, _month)
        if (firstDay === 0) {
            firstDay = 7
        }
        this.showCalendar(_year, _month, this.day, firstDay)
    }
    /* 渲染日历页面 */
    randerCalender() {
        this._yearEle.onchange = () => {
            this.getSelectValue()
        }
        this._monthEle.onchange = () => {
            this.getSelectValue()
        }

        this.getSelectValue()
    }

    /* 点击改变颜色 */
    clickChangeColor() {
        this.root.querySelector('ul').addEventListener('click', (e) => {
            this.root.querySelectorAll('li').forEach(item => {
                item.classList.remove('cld-cur')
            })
            e = e || window.event
            let target = e.target || e.srcElement
            target.classList.add('cld-cur')
        })
        this.root.querySelector('table').addEventListener('click', (e) => {
            this.root.querySelectorAll('td').forEach(item => {
                item.style.backgroundColor = "#fff"
            })
            e = e || window.event
            let target = e.target || e.srcElement
            if (target.nodeName == "TD") {
                target.style.backgroundColor = "rgb(174, 225, 245)"
                let value = target.getAttribute('value')
                this.setMonthSelect(value)
            }
        })
    }
    /* 点击切换页面 */
    clickChangePage() {
        this.btn_year.onclick = () => {
            this.root.querySelector('ul').style.display = "block"
            this.root.querySelector('table').style.display = "none"
            this.btn_month.style.borderColor = "#dbd6d6"
            this.btn_year.style.borderColor = "skyblue"
            this.getSelectValue()
        }
        this.btn_month.onclick = () => {
            this.root.querySelector('ul').style.display = "none"
            this.root.querySelector('table').style.display = "table"
            this.btn_month.style.borderColor = "skyblue"
            this.btn_year.style.borderColor = "#dbd6d6"
        }
        this.randerCurrentMonth(this.month)
        this.randerCalender()
    }
    /*当前月份样式渲染 */
    randerCurrentMonth(_month) {
        let tdArr = this.root.querySelectorAll('table td')
        tdArr[_month - 1].style.borderTop = "2px solid skyblue"
        tdArr[_month -1].style.backgroundColor = "rgb(174, 225, 245)"
    }
    /* 点击月份设置下拉框的月份 */
    setMonthSelect(value) {
        this.monthOptionEle.forEach(item => {
            if (item.value == value) {
                item.setAttribute("selected", "true")
            }
        })
    }
}